<template>
    <div class="app-container">
        <CustInfo/>
        <div class="item_box">
            <el-form ref="formRef" :model="formData" :rules="rules" label-width="100px">
                <el-form-item label="审批过程" prop="history">
                    <el-table :data="historyList" align="center">
                        <el-table-column label="序号" type="index" width="80" align="center"/>
                        <el-table-column label="流程环节" prop="taskName" align="center"/>
                        <el-table-column label="处理人" prop="assigneeName" align="center"/>
                        <el-table-column label="处理时间" prop="endDate" align="center"/>
                        <el-table-column label="处理结果" prop="approveOperateText" align="center"/>
                        <el-table-column label="处理意见" prop="comment" align="center"/>
                        <el-table-column label="处理状态" prop="taskStatus" align="center"/>
                        <el-table-column label="审批附件" prop="taskFile" align="center">
                            <template #default="{row}">
                                <el-button link type="primary" @click="viewFile(row)">查看附件</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item label="审批处理" prop="approvalStatus">
                    <el-select v-model="formData.approvalStatus" style="width: 240px">
                        <el-option v-for="dict in approvalStatusOption" :key="dict.value" :label="dict.label" :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="审批意见" prop="approvalMsg">
                    <el-input 
                        v-model="formData.approvalMsg" 
                        type="textarea" 
                        placeholder="请输入" 
                        maxlength="200" 
                        style="width: 60%"
                        show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="附件" prop="fileIds">
                    <file-upload
                        v-model="formData.fileIds"
                        :fileType="['png','jpg','pdf']"
                    ></file-upload>
                </el-form-item>
            </el-form>
        </div>
        <el-row justify="center">
            <el-button @click="cancel" icon="Back" plain type="primary">取消领取</el-button>
            <el-button @click="submit" icon="Position" type="primary">提交</el-button>
        </el-row>
    </div>
</template>

<script setup>
import CustInfo from '../custDetails/CustInfo'
import { getCurrentInstance, reactive, ref, toRaw } from 'vue';
const router = useRouter()
const { proxy: vm } = getCurrentInstance()

const approvalStatusOption = [{label: '同意', value: '1'}, {label: '拒绝', value: '2'}]
const historyList = reactive([
    {
        taskName: "提交人新增项目",
        assigneeName: "王丽丽",
        endDate: "2024-12-22 15:15:15",
        approveOperateText: "",
        comment: "",
        taskStatus: "审批通过",
        taskFile: []
    },
    {
        taskName: "审批员审批项目",
        assigneeName: "王军",
        endDate: "2024-12-22 15:15:15",
        approveOperateText: "同意",
        comment: "可以，通过。",
        taskStatus: "审批通过",
        taskFile: []
    },
])
const formData = reactive({
    approvalStatus: '',
    approvalMsg: '',
    fileIds: []
})
const rules = {
    approvalStatus: [{ required: true, message: "请选择", trigger: "change" }],
    approvalMsg: [{ required: true, message: "请输入", trigger: "blur" }],
}
const formRef = ref(null)
const submit = ()=>{
    formRef.value.validate(valid => {
        if(!valid){
            return vm.$modal.notifyWarning("请完善表单信息");
        }
        vm.$modal.msgSuccess("处理成功");
        cancel()
    })
}
const cancel = ()=>{
    vm.$tab.closeOpenPage()
    router.back()
}
const viewFile = (row) => {
    console.log('row', toRaw(row))
}
</script>

<style lang="scss" scoped>
.item_box{
    overflow: hidden;
    position: relative;
    transition: all .5s;
    .isOpen{
        position: absolute;
        bottom: 10px;
        right: 20px;
    }
}
.title_sub{
    font-size: 14px;
    color: #545454;
}
.fileItem{
    font-size: 14px;
    color: #545454;
    cursor: pointer;
}
.fileItem:hover{
    color: #20a0ff;
}
</style>